// 表单提交的内容接口
interface UserForm {
  account: string
  password: string
}
// 登录请求返回信息的接口
interface LoginApi {
  username: string
  role: number
  userId: number
  token: string
}
import React, { useEffect } from "react"
import { useNavigate } from "react-router-dom"
import { Button, Checkbox, Form, Input, message } from "antd"
import axios from "axios"
const Index = () => {
  const navigate = useNavigate()
  const onFinish = async (values: UserForm) => {
    try {
      const res = await axios.post("http://172.27.2.110/login", values)
      console.log(res)
      message.success("登录成功")
      localStorage.setItem("token", res.data.token)
      localStorage.setItem("userInfo", JSON.stringify(res.data))
      navigate("/")
    } catch (error) {
      message.error("登录失败")
      console.error(error)
    } finally {
    }
  }
  return (
    <div>
      <Form
        name="basic"
        labelCol={{ span: 8 }}
        wrapperCol={{ span: 16 }}
        style={{ maxWidth: 600 }}
        initialValues={{ remember: true }}
        onFinish={onFinish}
        autoComplete="off">
        <Form.Item
          label="用户名"
          name="account"
          rules={[{ required: true, message: "Please input your username!" }]}>
          <Input />
        </Form.Item>
        <Form.Item
          label="密码"
          name="password"
          rules={[{ required: true, message: "Please input your username!" }]}>
          <Input />
        </Form.Item>
        <Form.Item label={null}>
          <Button type="primary" htmlType="submit">
            登录
          </Button>
        </Form.Item>
      </Form>
    </div>
  )
}

export default Index
